<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>个人中心 - ShakesBeare</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Hosting Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

    <%--<link href="${pageContext.request.contextPath}/static/admin/assets/css/minimal.css" rel="stylesheet"/>--%>
    <%--<link href="${pageContext.request.contextPath}/static/admin/assets/css/vendor/bootstrap/bootstrap.min.css" rel="stylesheet"/>--%>
    <link href="${pageContext.request.contextPath}/static/home/css/bootstrap.css" rel='stylesheet' type='text/css' />

    <script src="${pageContext.request.contextPath}/static/home/js/jquery-1.11.1.min.js"></script>
    <%--<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/bootstrap/bootstrap.min.js"></script>--%>
    <!-- Custom Theme files -->
    <link href="${pageContext.request.contextPath}/static/home/css/edit_user_info_css.css" rel='stylesheet' type='text/css' />
    <!-- Custom Theme files -->

    <!-- webfonts -->
    <link href='${pageContext.request.contextPath}/static/home/css/font-awesome.css' rel='stylesheet' type='text/css'/>
    <!-- webfonts -->
    <!-- dropdown -->
    <script src="${pageContext.request.contextPath}/static/home/js/jquery.easydropdown.js"></script>
    <script src="${pageContext.request.contextPath}/static/home/js/jquery-labelauty.js"></script>

    <link href="${pageContext.request.contextPath}/static/home/css/nav.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="${pageContext.request.contextPath}/static/home/css/jquery-labelauty.css" rel='stylesheet' type='text/css' />
    <link href="${pageContext.request.contextPath}/static/home/css/passwordStyle.css" rel='stylesheet' type='text/css' />
    <link href="${pageContext.request.contextPath}/static/admin/css/sweetalert.css" rel="stylesheet">

    <!-- start-smoth-scrolling -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/home/js/move-top.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/home/js/easing.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/home/js/bootstrapValidator.min.js"></script>

    <script src="${pageContext.request.contextPath}/static/admin/js/sweetalert.min.js"></script>
    <!-- start-smoth-scrolling -->
    <!-- webfonts -->
    <%--<link href='http://fonts.useso.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>--%>
    <!-- webfonts -->
    <!-- start-smoth-scrolling -->
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event){
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
            });
        });
    </script>
    <!-- end-smoth-scrolling -->
</head>
<!-- Header Starts Here -->
<div class="banner inner-banner" >
    <%--<div class="header">
        <div class="container">
            <div class="logo">
                <a href="#"><img src="${pageContext.request.contextPath}/static/home/images/logo1.png" alt=""></a>
            </div>
            <span class="menu"> Menu</span>

            <!--在这里添加菜单-->
            <div class="banner-top">
                <ul class="nav banner-nav">
                    <li><a href="${pageContext.request.contextPath}/">主页</a></li>
                    <% if(request.getSession().getAttribute("type") == null){%>
                    <li><a href="#">职位搜索</a></li>
                    <% }else if(request.getSession().getAttribute("type").equals("0")){ %>
                    <li><a href="#">职位搜索</a></li>
                    <li><a href="#">我的简历</a></li>
                    <li><a href="${pageContext.request.contextPath}/home/customer/personal.action">信息维护</a></li>
                    <li><a href="#">修改密码</a></li>
                    <% }else if(request.getSession().getAttribute("type").equals("1")){ %>
                    <li class="dropdown1"><a class="down-scroll" href="">职业管理</a>
                        <ul class="dropdown2">
                            <li><a href="new_jobs.html">新职业发布</a></li>
                            <li><a href="job_management.html">职位列表管理</a></li>
                        </ul>
                    </li>
                    <li><a href="#">简历管理</a></li>
                    <li><a href="#">简历库</a></li>
                    <li><a href="#">信息维护</a></li>
                    <li><a href="#">修改密码</a></li>
                    <% } %>
                    <% if(request.getSession().getAttribute("fullname") == null){%>
                    <li class="pull-right"><a href="${pageContext.request.contextPath}/loginPage.action"><i class="fa fa-power-off" style="font-size: large">&nbsp;登录</i></a></li>
                    <% }else{ %>
                    <li class="pull-right"><a href="${pageContext.request.contextPath}/logout.action"><i class="fa fa-power-off" style="font-size: large">&nbsp;退出登录</i></a></li>
                    <% } %>
                    <li class="dropdown1 pull-right"><a class="down-scroll" href=""><i class="fa fa-envelope" style="font-size: large">1</i></a>
                        <ul class="dropdown2">
                            <li><span>你有一条新消息</span></li>
                            <li >
                                <a href="#">
                                    <div class="message-info">
                                        <span >傻逼瑞</span>
                                        <span >半世纪前</span>
                                        <div class="message-content">我就是傻逼</div>
                                    </div>
                                </a>
                            </li>

                            <li >
                                <a href="#">
                                    <div class="message-info">
                                        <span class="sender">尼玛</span>
                                        <span class="time">半世纪前</span>
                                        <div class="message-content">我也是傻逼</div>
                                    </div>
                                </a>
                            </li>

                            <li >
                                <a href="#">
                                    <div class="message-info">
                                        <span class="sender">傻逼瑞</span>
                                        <span class="time">半世纪前</span>
                                        <div class="message-content">快来打我啊</div>
                                    </div>
                                </a>
                            </li>

                            <li >
                                <a class="red" href="#">
                                    <div class="message-info">
                                        <span class="sender">尼玛</span>
                                        <span class="time">半世纪前</span>
                                        <div class="message-content">快来打埋我</div>
                                    </div>
                                </a>
                            </li>

                            <li >
                                <a class="orange" href="#">
                                    <div class="message-info">
                                        <span class="sender">辉</span>
                                        <span class="time">刚刚</span>
                                        <div class="message-content">我是大帅B</div>
                                    </div>
                                </a>
                            </li>
                            <li class="topborder"><a href="#">Check all messages <i class="fa fa-angle-right"></i></a></li>
                        </ul>
                    </li>
                </ul>
                <script>
                    $("span.menu").click(function(){
                        $(" ul.nav").slideToggle("slow" , function(){
                        });
                    });
                </script>
            </div>
            <!--在这里添加菜单-->
            <div class="clearfix"> </div>

        </div>
    </div>--%>

    <%@include file="../header.jsp"%>
    <div id="breadcrumb_wrapper">
        <div class="container">

            <h3>信息维护</h3>
            <h6>有新的资料了？赶紧加上去吧！</h6>

            <div class="clearfix"></div>
        </div>
    </div>
</div>
<div class="clearfix"> </div>
<!-- Header Ends Here -->
<!--Main Starts Here-->
<div class="container">
    <div class="leave">
        <h2>编辑个人资料</h2>
        <p><br></p>
        <form class="form-customer" action="${pageContext.request.contextPath}/home/customer/saveCustomer.action" enctype="multipart/form-data" method="post">
            <div class="single-grid" style="display: none">
                <div class="col-md-6 single-us">
                    <input type="text" name="customer_id" value="${customer.customer_id}">
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="single-grid">
                <div class="col-md-6 single-us form-group">
                    <span>用户名</span>
                    <input type="text" name="fullname" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');" placeholder="用户名" value="${customer.fullname}">
                    <c:if test="${msg == 1}">
                        <p class="msg">请输入合法用户名！</p>
                    </c:if>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="single-grid">
                <div class="col-md-8 single-us">
                    <span>用户头像</span>
                    <div class="group">
                        <a class="file" style="width: 10%;height: 100%;padding: 2px">选择文件<input type="file" id="input01" name="input01" onchange="readFile(this)"></a>
                        <input type="text" class="form-control cus_width" readonly placeholder="请选择 JPG/PNG/GIF 类型的图片" value="${customer.headimgurl}">
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="single-grid">
                <div class="col-md-6 single-us">
                    <img src="${pageContext.request.contextPath}/upload/customer/${customer.headimgurl}" style="width:30%;min-height:150px" alt="暂无头像" id="headimage" name="headimgurl">
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="single-grid">
                <div class="col-md-6 single-us form-group">
                    <span>电子邮箱</span>
                    <input type="text" id="email" name="email" placeholder="address@example.com" value="${customer.email}">
                    <c:if test="${msg == 2}">
                        <p class="msg">请输入邮箱！</p>
                    </c:if>
                    <c:if test="${msg == 6}">
                        <p class="msg">请输入正确的邮箱地址！</p>
                    </c:if>
                    <c:if test="${msg == 9}">
                        <p class="msg">该邮箱已被注册！</p>
                    </c:if>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="single-grid">
                <div class="col-md-6 single-us form-group">
                    <span>手机号码</span>
                    <input type="text" id="telephone" name="telephone" placeholder="请输入11位电话号码" onkeydown="if(event.keyCode==13)event.keyCode=9" onkeypress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false" maxlength="11"  value="${customer.telephone}">
                    <c:if test="${msg == 3}">
                        <p class="msg">请输入手机号码！</p>
                    </c:if>
                    <c:if test="${msg == 7}">
                        <p class="msg">请输入正确的手机号码！</p>
                    </c:if>
                    <c:if test="${msg == 10}">
                        <p class="msg">该手机号已被注册！</p>
                    </c:if>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="single-grid">
                <div class="col-md-6 single-us">
                    <span>性别</span>
                    <p><br></p>
                    <c:choose>
                        <c:when test="${customer.sex == 'M'}">
                            <input type="radio" name="sex" id="optionsRadios1" value="M" checked>
                        </c:when>
                        <c:otherwise>
                            <input type="radio" name="sex" id="optionsRadios1" value="M">
                        </c:otherwise>
                    </c:choose>
                    <label for="optionsRadios1">男</label>
                    <c:choose>
                        <c:when test="${customer.sex == 'F'}">
                            <input type="radio" name="sex" id="optionsRadios2" value="F" checked>
                        </c:when>
                        <c:otherwise>
                            <input type="radio" name="sex" id="optionsRadios2" value="F">
                        </c:otherwise>
                    </c:choose>
                    <label for="optionsRadios2">女</label>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="text-top">
                <div class="col-md-8 text-in">
                    <input type="submit" value="提交">
                    <p><br></p>
                </div>
            </div>
        </form>
    </div>
</div>
<!--Main Ends Here-->


<!-- #Footer -->
<%@include file="../footer.jsp"%>
<!-- /#Footer -->
<!-- here stars scrolling icon -->
<script type="text/javascript">

    <c:if test="${error == 1}">
    alter("服务器出错！");
    </c:if>
    <c:if test="${success == 1}">
    swal({
        title: "",
        text: "编辑成功！",
        type: "success",
        showCancelButton: false,
        closeOnConfirm: true,
        confirmButtonText: "确定"
    }, function() {
        window.location.href="${pageContext.request.contextPath}/home/customer/personal.action";
    });
    setTimeout(function(){
        window.location.href="${pageContext.request.contextPath}/home/customer/personal.action";
    },3000);
    </c:if>
    $(document).ready(function() {
        /*
         var defaults = {
         containerID: 'toTop', // fading element id
         containerHoverID: 'toTopHover', // fading element hover id
         scrollSpeed: 1200,
         easingType: 'linear'
         };
         */

        $().UItoTop({ easingType: 'easeOutQuart' });

    });

    function readFile(obj){
        var file = obj.files[0];
        //判断类型是不是图片
        if(!/image\/\w+/.test(file.type)){
            alert("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
            console.log(this.result);
            $('#headimage').attr('src',this.result);
        }
    }

    $(function () {
        $('.file').on('change',"input[type='file']",  function() {
            var input = $(this),
                    numFiles = input.get(0).files ? input.get(0).files.length : 1,
                    label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
            var input1 = $(this).parents('.group').find(':text'),
                    log = numFiles > 1 ? numFiles + ' files selected' : label;


            console.log(log);
            console.log(input.val());


            if( input1.length ) {
                input1.val(log);
            } else {
                if( log ) alert(log);
            }

        });
    })

</script>

<script>
    $(function(){
        $('.form-group').data('bootstrapValidator', null);
        $('.fadeInRight').each(function (e) {
            if($(this).hasClass('has-success')){
                $(this).removeClass('has-success');
            }
            if($(this).hasClass('has-error')){
                $(this).removeClass('has-error');
            }
        });
        $('.form-customer').bootstrapValidator({
            message: 'This value is not valid',
            fields: {
                telephone:{
                    validators: {
                        notEmpty: {
                            message: '请填手机号码'
                        },
                        numeric: {message: '请输入正确手机号码'},
                        stringLength: {
                            min: 11,
                            max: 11,
                            message: '请输入11位手机号码'
                        },
                        remote:{
                            message:"该手机号已被注册！",
                            url:'${pageContext.request.contextPath}/home/customer/checkExistCustomerPhone.action',
                            data:{
                                customer_id:${customer.customer_id},
                                telephone:$('#telephone').val()
                            }
                        }
                    }
                },
                fullname:{
                    validators: {
                        notEmpty: {
                            message: '请填用户名'
                        },
                        stringLength: {
                            min: 3,
                            max: 30,
                            message: '合法长度为3~30'
                        },
                        regexp: {           //正则校验
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '请输入合法用户名'
                        }
                    }
                },
                email:{
                    validators: {
                        notEmpty: {
                            message: '请填邮箱'
                        },
                        emailAddress: {     //　　邮箱格式校验
                            message: '请填正确邮箱地址'
                        },
                        remote:{
                            message:"该邮箱已被注册！",
                            url:'${pageContext.request.contextPath}/home/customer/checkExistCustomerEmail.action',
                            data:{
                                customer_id:${customer.customer_id},
                                email:$('#email').val()
                            }
                        }
                    }
                }
            }
        });
    });
</script>
<!-- //here ends scrolling icon -->
</body>
</html>
